<template>
	<div class="bg-con">
		<div class="stepscon">
			<el-steps :active="active" 
		class="steps"
			:space="900" align-center finish-status="success">
				<el-step title="基础信息/店铺"> </el-step>
				<el-step title="商品信息"> </el-step>
			</el-steps>
		</div>
		<!-- 步骤1 -->
		<div v-show="active == 1">
			<div class="upload-con">
				<div class="leftcon">
					<el-form class="shopform" ref="udata" :model="udata" label-width="80" label-position='top'>
						<el-form-item label="企业信息">
							<el-select 
              v-model="value" 
              placeholder="请选择企业" 
              
              style="width: 200px">
								<el-option 
      
                v-for="(item,index) in udata.companyShops" :key="index" :value="item.companyName">
	<span style="color: #8492a6; font-size: 13px">{{ item.companyName }}</span>
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="税号">
							<el-input v-model="udata.company.taxNumber" style="width: 200px"></el-input>
						</el-form-item>
						<el-form-item label="经营期限">
							<el-input v-model="udata.company.operatingPeriodEnd" style="width: 200px"></el-input>
						</el-form-item>
						<el-form-item label="经营范围">
							<el-input style="width: 200px;" type="textarea" autosize maxlength="150" placeholder="" rows="5" 
								v-model="udata.company.businessCope" class="resizenone"></el-input>
						</el-form-item>
						<el-form-item label="数据周期">
							<el-input v-model="udata.company.operatingPeriodStart" style="width: 200px"></el-input>
						</el-form-item>
					</el-form>
				</div>
				<div class="rightcon">
					<p style="font-size:20px">店铺:</p>
					<!-- 表格 -->
					<div v-for="item,index in udata.companyShops" :key="item.id"
					>
					<el-form :inline="true" 
					label-position="top"
					height:600
					 class="demo-form-inline">
					  <el-form-item label="店铺名字">
					    <el-input v-model="item.name" placeholder=""></el-input>
					  </el-form-item>
					  <el-form-item label="渠道">
					     <el-input v-model="item.channelName" placeholder=""></el-input>
					  </el-form-item>
						<el-form-item label="链接">
						  <el-input v-model="item.shopUrl" placeholder=""></el-input>
						</el-form-item>
					  <el-form-item style="padding: 45px;">
					  <template slot-scope="scope" >
					  								<i style="width: 50px; cursor: pointer" class="el-icon-delete"
					  									@click="handleDeletetab1(index, scope.row)"></i>
					  								<i style="width: 50px; cursor: pointer" class="el-icon-circle-plus-outline"
					  									@click="add(index, scope.row)"></i>
					  							</template>
					  </el-form-item>
					</el-form>
					</div>
				</div>

			</div>
			<!-- <div class="footer"></div> -->
		</div>
		<!-- 步骤2 -->
		<div v-show="active == 2">
			<div class="active2">
				<el-container>
					<el-aside style="margin-top:15px">
						<p>店铺:</p>
						<div class="tablist">
							<el-table :data='udata.companyShops' 
							@cell-click="skiptomap" 
							fit highlight-current-row stripe
							border >
						
							<el-table-column prop="name" lable="name" align="center"></el-table-column>
							</el-table>
						</div>
					</el-aside>
					<el-main style="width:900px;height:600px;margin:auto">
						<!--  -->
					<el-row v-for=" item,index in selectShopGoods" :key="item.id"	>
						<el-form inline
						label-position="top"
						height:600
						 class="demo-form-inline">
              
                <el-form-item label="商品ID" label-width="100" v-show="false">
                  <el-input v-model="item.id" placeholder="" ></el-input>
                </el-form-item>
             
              
                <el-form-item label="店铺ID" label-width="100" v-show="false">
                  <el-input v-model="item.shopId" placeholder="" ></el-input>
                </el-form-item>
              
              
                <el-form-item label="商品名字" label-width="100">
                  <el-input v-model="item.name" placeholder=""></el-input>
                </el-form-item>
              
              
                <el-form-item label="规格">
                  <el-input v-model="item.shopSpecs" placeholder=""></el-input>
                </el-form-item>
              
              
                <el-form-item label="分类">
                  <el-input v-model="item.goodsClassificationName" placeholder=""></el-input>
                </el-form-item>
              
              
                <el-form-item label="单价">
                  <el-input v-model="item.salePrice" placeholder=""></el-input>
                </el-form-item>
              
              
                <el-form-item label="月销量">
                  <el-input v-model="item.rangeNum" placeholder=""></el-input>
                </el-form-item>
              
              
                <el-form-item style="padding: 45px;">
                  <template slot-scope="scope" >
                    <i style="width: 50px; cursor: pointer" class="el-icon-delete"
                      @click="handleDeletetab2(index, scope.row)"></i>
                    <i style="width: 50px; cursor: pointer" class="el-icon-circle-plus-outline"
                      @click="addtab2(index, scope.row)"></i>
                  </template>
                </el-form-item>
              
						</el-form>
					</el-row>			
					</el-main>
				</el-container>
			</div>
		</div>
		<div class="footer"></div>
		<div class="btn-pos">
			<el-button @click="pre" v-if="active > 1">上一步</el-button>
			<el-button @click="next" v-if="active < 2">下一步</el-button>
			<el-button v-if="active>1" @click="submit">提交</el-button>
		</div>
		<div class="backbtn">
			<el-button @click="goback">返回</el-button>
		</div>
	</div>

</template>
<script>
import companyReport from "./goods.json";
export default {
  data() {
    return {
      udata: companyReport,
      value: "",
      active: 1,
      selectShopGoods: [],
    };
  },
  computed: {},
  // mounted() {
  //   console.log(this.udata);
  // },
  methods: {
    submit() {
      console.log(this.udata, "提交数据");
    },
    skiptomap(row) {
      this.selectShopGoods = row.goodsList;
      
    },
    goback() {
      this.$router.back();
    },
    addtab2() {
      // console.log(row);
      this.valNumer = this.valNumer + 1;
      var list = {
        id: this.id,
        shopId: this.shopId,
        name: this.name,
        shopSpecs: this.shopSpecs,
        salePrice: this.salePrice,
        goodsClassificationName: this.goodsClassificationName,
        rangeNum: this.rangeNum,
      };

      this.selectShopGoods.push(list);
    },
    add() {
      this.valNumer = this.valNumer + 1;
      var list = {
        numbering: "编号" + `-${this.udata.companyShops.length + 1}`,
        name: this.name,
        channelName: this.channelName,
        shopUrl: this.shopUrl,
      };

      this.udata.companyShops.push(list);
    },
    handleDeletetab2(index, row) {
      console.log("-----"+index);
      this.selectShopGoods.splice(index, 1);
      for (var i = index; i < this.selectShopGoods.length; i++) {
        //从某一行删除了编号，删除的编号后面的编号数据要依次减一，所以遍历删除编号后面的数据
        this.selectShopGoods[i].numbering =
          "编号" +
          `-${Number(this.selectShopGoods[i].numbering.split("-")[1]) - 1}`;
      }
    },
    handleDeletetab1(index, row) {
      this.udata.companyShops.splice(index, 1);
      for (var i = index; i < this.udata.companyShops.length; i++) {
        //从某一行删除了编号，删除的编号后面的编号数据要依次减一，所以遍历删除编号后面的数据
        this.udata.companyShops[i].numbering =
          "编号" +
          `-${Number(this.udata.companyShops[i].numbering.split("-")[1]) - 1}`;
      }
    },
    pre() {
      if (this.active-- < 2) this.active = 1;
    },
    next() {
      if (this.active++ > 2) this.active = 0;
    },
  },
};
</script>
<style lang="less" scoped>
/* 	.bg-con {
	  background: #fff;
	} */
el-form demo-form-inline el-form--label-top el-form--inline {
  height: 200px;
}
:deep(.steps .stepscon) {
  background: #428cdb;
}
:deep(.tablist .el-table thead) {
  display: none;
}

:deep(.rightcon .el-table__body) {
  -webkit-border-horizontal-spacing: -10px; // 水平间距
  -webkit-border-vertical-spacing: -10px; // 垂直间距
}

:deep(.resizenone) {
  .el-textarea__inner {
    resize: none;
  }
}

:deep(.el-table th.el-table__cell > .cell) {
  font-size: 14px;
  font-weight: normal;
  color: #a0aec0;
}

:deep(.el-form--label-top .el-form-item__label) {
  padding: 0;
  margin: 0;
}

.shopform {
  .avatar {
    display: block;
    position: absolute;
    margin: 0px -50px;
  }
}

// .footer {
// background: #35426f;
// width: 100%;
// height: 120px;
// position: absolute;
// overflow: hidden;
// margin-top: 30px;
// }

.cha {
  width: 20px;
  height: 20px;
  cursor: pointer;
  display: block;
  border-radius: 50%;
  border: 1px solid red;

  span {
    position: relative;
    margin: -2px 5px;
    color: red;
  }
}

.backbtn {
  position: fixed;
  bottom: 40px;
  left: 340px;

  .el-button {
    width: 170px;
    background: transparent;
    border-radius: 12px;
    color: #000;
  }
}

.btn-pos {
  position: fixed;
  bottom: 40px;
  right: 140px;

  .el-button {
    color: #fff;
    border: none;
    width: 170px;
    background: linear-gradient(270deg, #65d1bd 0%, #428cdb 100%);
    border-radius: 12px;
  }
}

.active2 {
  align-items: center;
  padding: 40px;

  .leflist {
    width: 10%;

    > div :hover {
      cursor: pointer;
    }
  }
}

.stepscon {
  border-bottom: 1px solid #e2e8f0;
  padding: 20px;
}

.upload-con {
  // border-right: 1px solid gray;
  padding: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 30px;

  .leftcon {
    height: 500px;
    padding: 40px;
    border-right: 1px solid #e2e8f0;
    min-width: 19%;
    width: 19%;
    margin-bottom: 30px;
  }

  .rightcon {
    margin-left: 40px;
    height: 600px;
    width: 900px;
    margin-bottom: 50px;
  }
}
</style>
